<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>account_setting</title>
    <link rel="stylesheet" href="../../../static/layer/css/layui.css" media="all"/>
    <style>
        form {
            width: 95%;
        }
    </style>
</head>

<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>账户设置</legend>
</fieldset>

<form class="layui-form">
    <!--<div class="layui-form-item">
        <label class="layui-form-label">头像</label>
        <div class="layui-input-block">
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test1">上传头像</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="demo1" style="width: 92px; height: 92px;">
                    <p id="demoText"></p>
                </div>
            </div>
        </div>
    </div>-->
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="USERNAME" disabled autocomplete="off" placeholder="请输入用户名" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">角色</label>
        <div class="layui-input-block">
            <input type="text" name="ROLE_NAME" disabled autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">昵称</label>
        <div class="layui-input-block">
            <input type="text" name="NAME" autocomplete="off" placeholder="请输入昵称" value="管理员" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="password" name="PASSWORD" style="display:none">
            <input type="password" name="PASSWORD" autocomplete="off" placeholder="密码为空代表不更改" class="layui-input" readonly onfocus="this.removeAttribute('readonly');"
            >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
            <input type="text" name="EMAIL" autocomplete="off" placeholder="请输入邮箱" class="layui-input">
        </div>
    </div>

  <!--  <div class="layui-form-item">
        <label class="layui-form-label">手机</label>
        <div class="layui-input-block">
            <input type="text" name="PHONE" autocomplete="off" placeholder="请输入手机" class="layui-input" maxlength="11">
        </div>
    </div>
-->


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="save">保存</button>
        </div>
    </div>
</form>

<script type="text/javascript" src="../../../static/layer/layui.js"></script>
<script type="text/javascript">
    layui.use(['jquery', 'form', 'upload', 'layer'], function() {
        var $ = layui.jquery,
            form = layui.form,
            upload = layui.upload,
            layer = layui.layer;
        var fileObj = {};

        $.ajax({
            url: "/user/findone",
            data: {},
            dataType: "json",
            type: "post",
            async: false,
            success: function (res) {
                if (res.errcode === "0"){
                    // console.log(res.data);

                    fileObj.name = res.data.IMG_NAME;
                    fileObj.size = res.data.IMG_SIZE;
                    fileObj.ext = res.data.IMG_EXT;
                    fileObj.url = res.data.IMG_URL;

                    var host = location.host;
                    $("#demo1").attr("src", "http://" + host + "/" + res.data.IMG_URL);

                    $("input[name='USERNAME']").val(res.data.USERNAME);
                    if (res.data.USER_TYPE == "95bb91515192430bb7a6b5d0a0876542") {
                        $("input[name='ROLE_NAME']").val("系统管理员");
                    } else {
                        $("input[name='ROLE_NAME']").val(res.data.ROLE_NAME);
                    }
                    $("input[name='NAME']").val(res.data.NAME);
                    // $("input[name='PASSWORD']").val(res.data.PASSWORD);
                    $("input[name='EMAIL']").val(res.data.EMAIL);
              /*      $("input[name='PHONE']").val(res.data.PHONE);*/


                } else if (res.errcode === "1"){
                    layer.msg(res.errmsg, function(){});
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                console.error(XMLHttpRequest.status);
                console.error(XMLHttpRequest.readyState);
                console.error(textStatus);
            }
        });

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/servlet/UploadHandleServlet'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res, index, upload){
                if (res.errcode == 0) { //上传成功
                    fileObj.name = res.data.fileName;
                    fileObj.size = res.data.fileSize;
                    fileObj.ext = res.data.extName;
                    fileObj.url = res.data.fileUrl;
                    return;
                }
                this.error(index, upload);
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

        //监听提交
        form.on('submit(save)', function(data){
            /*layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            });*/
            data.field.ATTACHMENT = fileObj;
            layer.msg('确认保存吗', {
                time: 0
                , btn: ['确定', '取消']
                , shade: 0.3
                , yes: function (index) {
                    $.ajax({
                        url: "/user/edituser",
                        data: data.field,
                        dataType: "json",
                        type: "post",
                        async: false,
                        success: function (res) {
                            if (res.errcode === "0"){
                                layer.close(index); // 关闭当前提示框

                                var host = location.host;
                                parent.$(".layui-nav-img").attr("src", "http://" + host + "/" + fileObj.url);

                                parent.$(".userName").html($("input[name='NAME']").val());

                                layer.msg("保存成功", {offset: '150px'});   // 页面弹出保存成功
                            } else if (res.errcode === "1"){
                                layer.msg(res.errmsg, function(){});
                            }
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            console.error(XMLHttpRequest.status);
                            console.error(XMLHttpRequest.readyState);
                            console.error(textStatus);
                        }
                    });
                }
            });
            return false;
        });
    });
</script>
</body>

</html>